<template>
	<view class="custom-popup-container" v-if="visible">
		<view class="custom-popup-mask" @click="closePopup"></view>
		<view class="custom-popup-box">
			<view class="add-item-popup">
				<view class="add-item-header">
					<text class="add-item-title">添加待办事项</text>
					<view class="add-item-close" @tap="closePopup">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="add-item-form">
					<view class="form-group">
						<view class="form-label">事项名称</view>
						<input type="text" class="form-input" v-model="formData.userName" placeholder="请输入事项名称" />
					</view>
					
					<view class="form-group">
						<view class="form-label">内容描述</view>
						<textarea class="form-textarea" v-model="formData.content" placeholder="在这里输入内容"></textarea>
					</view>
				</view>
				
				<view class="add-item-footer">
					<view class="action-button cancel" @tap="closePopup">取消</view>
					<view class="action-button submit" @tap="saveItem">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "AddItemPopup",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			editingItem: {
				type: Object,
				default: null
			},
			editingIndex: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				formData: {
					userName: '',
					content: '',
					status: 0
				}
			}
		},
		watch: {
			visible(val) {
				if (val && this.editingItem) {
					// 编辑模式：设置表单数据为待编辑项
					this.formData = { ...this.editingItem };
				} else if (val && !this.editingItem) {
					// 新增模式：重置表单数据
					this.resetForm();
				}
			}
		},
		methods: {
			closePopup() {
				this.$emit('update:visible', false);
				this.resetForm();
			},
			
			resetForm() {
				this.formData = {
					userName: '',
					content: '',
					status: 0
				};
			},
			
			validateForm() {
				if (!this.formData.userName.trim()) {
					uni.showToast({
						title: '请输入事项名称',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.content.trim()) {
					uni.showToast({
						title: '请输入内容描述',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			saveItem() {
				if (!this.validateForm()) return;
				
				if (this.editingIndex !== -1) {
					// 编辑模式
					this.$emit('update', {
						item: { ...this.formData },
						index: this.editingIndex
					});
				} else {
					// 新增模式
					this.$emit('add', { ...this.formData });
				}
				
				// 关闭弹窗
				this.closePopup();
			}
		}
	}
</script>

<style scoped>
	/* 自定义弹窗样式 */
	.custom-popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.custom-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.custom-popup-box {
		width: 343px;
		position: relative;
		z-index: 1000;
		border-radius: 16px;
		overflow: hidden;
	}
	
	/* 添加待办事项弹窗样式 */
	.add-item-popup {
		width: 100%;
		border-radius: 16px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.add-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.add-item-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.add-item-close {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	
	.close-icon {
		font-size: 44rpx;
		color: #999;
		line-height: 1;
	}
	
	.add-item-form {
		padding: 30rpx 0;
	}
	
	.form-group {
		margin-bottom: 30rpx;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		border: none;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}
	
	.form-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		border: none;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}
	
	.add-item-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
		border-top: 1px solid #f0f0f0;
	}
	
	.action-button {
		width: 140rpx;
		height: 70rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	
	.cancel {
		color: #666;
		margin-right: 20rpx;
	}
	
	.submit {
		background-color: #4080ff;
		color: #fff;
	}
</style> 